
// import { useEffect,useState} from 'react';
// function Child() {
//   useEffect(() => {
//     console.log('Child useEffect');
//     return () => {
//       console.log('clean up');
//     };
//   }, []);
//   return (
//     <div>
//       <h2>hello useEffect</h2>
//     </div>
//   );
// }
// function Parent() {
//   const [status, setStatus] = useState(true);
//   const [count, setCount] = useState(0);
//   const handleClick = () => {
//     setStatus(false);
//   };
//   const handleAddClick = () => {
//     setCount(count + 1);
//   };
//   return (
//     <div>
//       <button onClick={handleAddClick} >加1组件</button>
//       <button onClick={handleClick} >销毁组件</button>
//       {status && <Child />}
//     </div>
//   );
// }
// export default Parent

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);
  useEffect(() => {
    console.log(`Count 发生变化: ${count}`);

    return () => {
      console.log(`清除副作用: ${count}`);
    };
  }, [count]);

  return (
    <div>
      <div>count：{count}</div>
      <div>count2：{count2}</div>
      <button onClick={() => setCount(count + 1)}>count增加</button>
      <button onClick={() => setCount2(count2 + 1)}>count2增加</button>
    </div>
  );
}
export default MyComponent